<template>
    <div class="market-wrapper">
        <image class="market_bg" :style="imageStyle" :src="imgPath('market_bg.png')"></image>
        <div class="header">
            <div class="backPage" @click="backPage">
                <image class="arrow_left" :src="imgPath('back.png')"></image>
                <text class="back col_fff medium">返回</text>
            </div>
            <text class="title">大师工坊</text>
            <div class="btn-wrapper"></div>
        </div>
        <div class="market-content">
            <text class="name">泳衣库</text>
            <text class="description">提供设计、打版、打样一站式服务</text>
            <div class="ask-wrapper">
                <div class="ask-item" v-for="(item, index) in askList" :key="index" @click="jumpTo(item.path)">
                    <image class="ask-icon" :src="imgPath(item.icon)"></image>
                    <text class="ask-name">{{item.name}}</text>
                </div>
            </div>
        </div>
        <!--<NavBottom></NavBottom>-->
    </div>
</template>

<script>
import NavBottom from '@/components/navBottom'
const modal = weex.requireModule('modal')
const storage = weex.requireModule('storage')

export default {
  name: 'masterplatform',
  data () {
    return {
      askList: [
        {
          name: '打板',
          icon: 'printer.png',
          path: '/market/edition'
        },
        {
          name: '打样',
          icon: 'sam_garm_worker.png',
          path: '/market/proof'
        },
        {
          name: '设计',
          icon: 'designer.png',
          path: '/market/design'
        },
        {
          name: '高人',
          icon: 'designer.png',
          path: '/market/platformMaster'
        },
        {
          name: '数据',
          icon: 'designer.png',
          path: ''
        }
      ],
      imageStyle: {
        width: 750,
        height: 1334
      } // 图片大小
    }
  },
  mounted () {
    const that = this
    that.imageStyle.height = weex.config.env.deviceHeight / weex.config.env.deviceWidth * 750 + 'px'
  },
  methods: {
    backPage () { // 返回
      this.$router.go(-1)
    },
    jumpTo (path) { // 跳转
      const that = this
      if (!path) {
        modal.toast({
          message: '该功能暂未开放'
        })
        return
      }
      storage.getItem('userId', event => {
        if (event.result === 'success') {
          that.$router.push(path)
        } else {
          modal.toast({
            message: '用户未登录',
            duration: 0.8
          })
          that.$router.push('/login')
        }
      })
    }
  },
  components: {
    NavBottom
  }
}
</script>

<style scoped>
    .col_fff {
        color: #fff;
    }
    .header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        flex-wrap: wrap;
        flex-direction: row;
        height: 88px;
    }
    .backPage {
        width: 200px;
        flex-direction: row;
        align-items: center;
        padding-right: 8px;
        padding-left: 24px;
    }
    .title {
        width: 350px;
        text-align: center;
        font-size: 36px;
        font-weight: bold;
        line-height: 88px;
        color: #fff;
        font-family: regular;
    }
    .arrow_left {
        width: 24px;
        height: 40px;
        margin-right: 16px;
    }
    .back {
        font-size: 32px;
        line-height: 88px;
    }
    .btn-wrapper {
        width: 200px;
        padding-right: 24px;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
    }
    .market_bg {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
    }
    .market-content {
        position: absolute;
        left: 0;
        bottom: 180px;
        right: 0;
        background-color: transparent;
    }
    .name {
        font-size: 56px;
        color: #fff;
        font-weight: bold;
        font-family: regular;
        text-align: center;
    }
    .description {
        margin-top: 60px;
        color: #cecece;
        font-size: 26px;
        text-align: center;
    }
    .ask-wrapper {
        margin-top: 150px;
        padding-left: 50px;
        padding-right: 50px;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-around;
    }
    .ask-icon {
        width: 86px;
        height: 86px;
        margin-left: 7px;
    }
    .ask-name {
        width: 100px;
        margin-top: 20px;
        font-size: 28px;
        color: #cecece;
        font-weight: bold;
        text-align: center;
    }
</style>
